<template>
    <div>
        <el-dialog title="企业详情" width="30%" :show-close="false"
            :visible.sync="dialogViewVisible" :close-on-click-modal="false" style="height: 100%;"
            custom-class="customclassdialog">
            <el-form :model="form" style="width: 100%;overflow-y: auto;padding-right: 10px;"
                :style="'max-height:' + windowHeight / 2 + 'px;'">

                <el-row>
                    <el-col >
                        <el-form-item label="企业名称:" :label-width="formLabelWidth">
                            {{form.name}}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="负责人:" :label-width="formLabelWidth">
                            {{form.person}}
                        </el-form-item>
                    </el-col>
                    <el-col >
                        <el-form-item label="联系电话:" :label-width="formLabelWidth">
                            {{form.mobile}}
                        </el-form-item>
                    </el-col>
                    <!-- <el-col >
                        <el-form-item label="企业地址:" :label-width="formLabelWidth">
                            {{form.address}}
                        </el-form-item>
                    </el-col> -->
                    <!-- <el-col >
                        <el-form-item label="备注:" :label-width="formLabelWidth">
                            <screenSelect title="" type='textarea' v-model="form.remark" :isValue='form.remark'
                                placeholder="请输入" @transfer="valueHeld($event, 'remark')" width='100%' position="top" />
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="viewcancel">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import screenSelect from '@/components/screenSelect/index.vue';
export default {
    name: 'WorkspaceJsonAddenterpriseinfo',
    components: {
        screenSelect
    },
    props: {
        optionVal: {
            type: Object
        },
        dialogViewVisible: {
            type: Boolean
        }
    },
    watch: {
        optionVal: {
            handler(ne, ol) {
                this.form = ne
            },
            deep: true,
            immediate: true
        },
    },
    data() {
        return {
            formLabelWidth: '100px',
            form: {},
            windowHeight: 0,
        };
    },
    mounted() {
        this.windowHeight = document.body.clientHeight;
    },
    methods: {
        viewcancel() {
            let e = {}
            e.dialogViewVisible = false
            e.form = this.form
            this.$emit('viewcancel', e);
        },
    },
};
</script>

<style lang="scss" scoped>
// @keyframes fadeIn {
//     from { 
//         opacity: 0;
//         transform: translateY(-100%);
//     }
//     to { 
//         opacity: 1;
//         transform: translateY(0px);
//     }
// }
// ::v-deep .customclassdialog {
//     border-radius: 10px !important;
//     animation: fadeIn 1s ease-in-out forwards;
// }
::v-deep .editHeld_conter_left .avatar-uploader .el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.editHeld_conter_left .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 180px;
    height: 180px;
    line-height: 180px;
    text-align: center;
}

.editHeld_conter_left .avatar {
    width: 180px;
    height: 180px;
    display: block;
    position: relative;

    img {
        width: 100%;
        height: 100%;
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #00000066;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #FFFFFF;
    }
}
</style>